<template>
	<view class="material-downloader">
		<u-popup :show="showProgress" :closeOnClickOverlay="false" :safeAreaInsetBottom="false" :round="10"
			mode="center">
			<view class="material-downloading">
				<view class="material-downloading__file">
					<view class="-name f-22">{{file.name}}</view>
					<u-line-progress :percentage="file.progress" />
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "material-downloader",
		props: {
			showProgress: {
				type: Boolean,
				default: false,
			},
			file: {
				type: Object,
				default: () => {}
			},
		},
		computed: {
			title: function() {
				return this.type === 'video' ? '上传视频' : (this.type === 'image' ? '上传图片' : '上传文件');
			}
		},
	}
</script>

<style lang="scss" scoped>
	.material-downloading {
		padding: 20rpx 26rpx;

		.material-downloading__file {
			margin-bottom: 20rpx;

			.-name {
				line-height: 60rpx;
				min-width: 300rpx;
			}
		}
	}
</style>
